import {
  ExpertAppointScene,
  ExpertProps,
  ExpertSceneProps,
} from '@/api/expert';
import { Button, Checkbox, Divider, Icon, Popup } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useMemo, useState } from 'react';
import { useRequest } from 'taro-hooks';

export default function useExpertsSelector(props: {
  detail: ExpertSceneProps;
  onSuccess: Function; //选择专家报名之后～
}) {
  const [show, setShow] = useState<boolean>(false);
  const [selectExpert, setSelectExpert] = useState<ExpertProps>(); //选中的专家

  //获取专家
  const experts = useMemo(() => props.detail?.experts, [props.detail]);

  //预约场景
  const { runAsync, loading } = useRequest(ExpertAppointScene, {
    manual: true,
  });

  function renderNode() {
    return (
      <Popup
        show={show}
        position='bottom'
        round
        style={{ overflow: 'initial' }}
      >
        <Icon
          onClick={() => setShow(false)}
          name='close'
          className=' absolute right-2 -top-10  text-white text-2xl'
        />

        <View className='px-4 py-3'>
          <Text className=' text-lg font-bold text-black'>选择预约服务</Text>
        </View>
        <Divider className='m-0' />

        <View className='p-4'>
          <Text className=' text-black font-bold text-sm block mb-1'>
            服务时间：
          </Text>
          <View className=' text-xs block'>{props.detail?.appoint_time}</View>

          <Text className=' text-black font-bold text-sm block mb-1 mt-4'>
            可选专家
          </Text>
          <View className=' flex overflow-auto space-x-2 -mx-4 pl-4'>
            {experts?.map((item) => (
              <View
                key={item.id}
                className=' flex-shrink-0 relative'
                onClick={() => setSelectExpert(item)}
              >
                <Button
                  onClick={() => {
                    Taro.navigateTo({
                      url: `/pages/professional/detail?id=${item.id}&readonly=true`,
                    });
                  }}
                  size='small'
                  className=' absolute left-1/2 -translate-x-1/2 top-[170px] leading-none h-4 text-[16px]'
                  type='primary'
                >
                  查看详情
                </Button>

                <Checkbox
                  value={item.id === selectExpert?.id}
                  className=' absolute left-1 top-1 '
                />

                <View className='w-[208px] rounded-lg overflow-hidden'>
                  <Image
                    src={item.headimg}
                    className=' block w-full h-[208px]'
                    mode='aspectFill'
                  />
                  <View className='bg-[#F6F7FB] p-2'>
                    <Text className=' font-bold text-black text-center text-sm block van-ellipsis'>
                      {item.name}
                    </Text>
                    <Text className=' text-[20px] text-gary1 van-multi-ellipsis--l2 mt-1'>
                      {item.description}
                    </Text>
                  </View>
                </View>
              </View>
            ))}
          </View>

          <Text className=' text-black font-bold text-sm mb-1 mt-4 block'>
            服务价格
          </Text>
          <Text className=' text-xs block'>{props.detail?.beans}帮豆 / 次</Text>
        </View>

        <Divider className='m-0' />
        <View className='p-4'>
          {(Boolean(experts?.length) && (
            <>
              <Button
                block
                type='primary'
                size='large'
                loading={loading}
                disabled={Boolean(!selectExpert?.id)}
                onClick={async () => {
                  if (!selectExpert?.id)
                    return Taro.showToast({
                      title: '请选择专家',
                      icon: 'none',
                    });
                  if (!props.detail?.id) return;

                  await runAsync({
                    expertId: selectExpert?.id,
                    sceneId: props.detail?.id,
                  });

                  setSelectExpert(undefined);
                  Taro.showToast({ title: '预约成功' });
                  setShow(false);
                  props.onSuccess();
                }}
              >
                {props.detail?.beans}帮豆 立即预约
              </Button>
              <View className=' text-xs text-gary3 text-center mt-1'>
                预约成功核销后可获得
                <Text className=' text-primary  font-bold'>
                  {props.detail?.points}
                </Text>{' '}
                积分
              </View>
            </>
          )) || (
            <Button type='primary' disabled size='large'>
              暂无可预约专家
            </Button>
          )}
        </View>
      </Popup>
    );
  }

  return {
    open: function () {
      setShow(true);
    },
    renderNode,
  };
}
